import { Button, Tabs, Row } from 'antd';
import React, { useEffect, useState } from 'react';
import CodeMirror from 'src/components/ScriptEditor';
import { eventLog } from 'src/services/api/system';
export default function LogDetail(props) {
  const [detail, setDetail] = useState({});
  useEffect(() => {
    eventLog
      .detail({
        req_id: props.record.req_id,
      })
      .then((res) => {
        const { request = {}, response = {} } = res.data || {};
        setDetail({
          request: JSON.stringify(request, null, 4),
          response: JSON.stringify(response, null, 4),
        });
      });
  }, []);
  return (
    <div>
      <Tabs>
        <Tabs.TabPane tab='Request' key='req'>
          <CodeMirror mode={{ name: 'javascript', json: true }} disabled={true} value={detail.request} />
        </Tabs.TabPane>
        <Tabs.TabPane tab='Response' key='res'>
          <CodeMirror mode={{ name: 'javascript', json: true }} disabled={true} value={detail.response} />
        </Tabs.TabPane>
      </Tabs>
      <Row type='flex' justify='center' style={{marginTop: '10px'}}>
        <Button autoFocus={true} onClick={() => props.closeModal()}>取消</Button>
      </Row>
    </div>
  );
}
